<template>
    <div class="date">
      <div class="img">
        <img src="../assets/img/bg.png" alt="">
      </div>
      <div class="container">
        <div class="txt">我们的特色方案</div>
      </div>
      <div class="show">
        <div  class="show-item" :class=" [activeId === i? 'active': '']" v-for="(item, i) in itemValue" :key="i" @mouseenter="active(i)">
         <div class="icon">
           <i :class="icon[i]"></i>
         </div>
          <div class="text">{{item.name}}</div>
        </div>
      </div>
<!--      根据hover显示文字-->
      <div class="showTxt">
        <div style="margin-top: 10px;padding-top:50px; width:100%; height: 10px;color:#2C3E50">{{textInfo[activeId]}}</div>
      </div>
<!--      整体解决方案-->
      <div class="solution">
        <div class="text">整体方案解决架构</div>
        <div class="pic">
          <img src="../assets/img/table.png" alt="">
        </div>
      </div>
<!--      我们的客户案例-->
      <div class="cus">
        <div class="text">整体方案解决架构</div>
        <div class="cus-box">
          <div class="cus-item" v-for="(item, i) in cusInfo" :key="i">
            <div style="padding-top: 40px; margin: 0 0 45px 0">
              <img :src="require('../assets/img/'+(i+1)+'.png')" alt="" >
            </div>
            <h3>{{item.name}}</h3>
            <p>{{item.dic}}</p>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Data',
  data () {
    return {
      itemValue: [
        { name: '统一数据标准' },
        { name: '统一数据服务' },
        { name: '统一资产管理' },
        { name: '统一开发平台' }
      ],
      // 被激活的item id
      activeId: -1,
      //  图标库
      icon: [
        'iconfont icon-zhineng',
        'iconfont icon-ipad',
        'iconfont icon-viewgallery',
        'iconfont icon-diannao'
      ],
      textInfo: [
        '通过数据标准体系建设方法论+数据指标系统，统一数据指标口径，消除数据二义性',
        '统一对外数据服务接口，实现所有需求，一个接口',
        '提供企业级数据资产管理平台，并通过数据地图与数据血缘实现360°数据全链路追踪',
        '提供可视化、拖拽式自助开发与分析平台，统一数据开发流程与项目周期管理'
      ],
      //  顾客信息
      cusInfo: [
        {
          pic: '../src../assets/img/1.png',
          name: '星巴克合作项目',
          dic: 'Donec mauris nunc, vulputate at facilisis eget, dignissim lobortis ante. Aliquam rutrum.'
        },
        {
          pic: '../assets/img/2.png',
          name: '百胜合作项目',
          dic: 'Donec mauris nunc, vulputate at facilisis eget, dignissim lobortis ante. Aliquam rutrum.'
        },
        {
          pic: '../assets/img/3.png',
          name: '农夫山泉合作项目',
          dic: 'Donec mauris nunc, vulputate at facilisis eget, dignissim lobortis ante. Aliquam rutrum.'
        }
      ]
    }
  },
  methods: {
  //  激活操作：
    active (i) {
      this.activeId = i
    }
  }
}
</script>

<style lang="less" scoped>
  .date{
    background-color: #f1f1f1;
  }
.img{
  width: 100%;
  height: 537.75px;
  >img{
    width: 100%;
    height: 100%;}
}
  .container{
      height: 75px;
      padding-top: 54px;
      font-size: 24px ;
      color:#666666;
      text-align: center;
    position: relative;
    >.txt::after{
      content: "";
      width: 40px;
      height: 1px;
      background-color: #111319;
      display: block;
      margin: 38px auto 0;
    }
    }
  .show{
    position:relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0);
    width: 1200px;
    height: 230px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 54px 0 40px 0;
    >.show-item{
      width: 150px;
      height: 150px;
      background: #60b5ee;
      border-radius: 1em;
      position: relative;
      text-align: center;
      display: flex;
      flex-direction: column;
      >.icon{
        width: 55px;
        height: 55px;
        font-size: 60px;
        padding-top: 40px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin:0 auto;
        color: white;
        >i{
          font-size: 60px;
        }
      }
      >.text{
        font-size: 20px;
        color: white;
      }
    }
    >.circle{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #60b5ee;
    }
    >.active{
      width: 165px;
      height: 165px;
      transition: all linear 1s;
    }
  }
  .showTxt{
    width: 800px;
    height: 140px;
    border-radius: 1em;
    position:relative;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0);
    margin-bottom: 30px;
    background-color: #fff;
  }
  .solution{
    color: #2C3E50;
    position: relative;
    >.text{
      height: 75px;
      width: 100%;
      padding-top: 54px;
      font-size: 24px ;
      text-align: center;
    }
    >.text::after{
      content: "";
      width: 40px;
      height: 1px;
      background-color: #111319;
      display: block;
      margin: 38px auto 0;
    }
    >.pic{
      margin-top: 10px;
      margin-left: 15%;
      padding-bottom: 60px;
      >img{
        height: 790px;
        width: 1000px;
      }
    }
  }
  .cus{
    padding-bottom: 80px;
    background: white;
    >.text{
      height: 75px;
      width: 100%;
      padding-top: 54px;
      font-size: 24px ;
      text-align: center;
    }
    >.text::after{
      content: "";
      width: 40px;
      height: 1px;
      background-color: #111319;
      display: block;
      margin: 38px auto 0;
    }
    >.cus-item{
      width: 304px;
      height: 280px;
      border: 1px solid black;
    }
    >.cus-box{
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
      text-align: center;
      >.cus-item{
        width: 304px;
        height: 280px;
        color: #999999;
        >img{
          width: 100px;
          height: 85px;
          padding-top: 10px;
        }
      }
      >.cus-item:hover{
        background-color: #f1f1f1;
        color: cyan;
      }
    }
  }
</style>
